<template>
  <b-collapse-wrap :title="title" collapse>
    <div class="p16">
      <h2><span style="color: #009999">演示用程序代码生成打印页：</span></h2>
      <h4><span style="color: #009999">下面模拟打印一张名片</span></h4>
      <b-divider />
      <div>
        <p>
          现在用以上代码打印，先看看
          <b-button type="text" @click="printClick">打印预览</b-button>
          效果！ 如果效果好可以
          <b-button type="text" @click="printClick2">直接打印</b-button>
          ，打印机多就
          <b-button type="text" @click="printClick3">选择打印机</b-button>
          打印
        </p>
      </div>
      <b-divider />
      <p>可以使用html文本来进行打印，打印样式全依赖html展现。</p>
      <b-row gutter="16">
        <b-col span="14">
          <b-ace-editor v-model="htmlText" height="300px" lang="html" style="line-height: 1.7" />
        </b-col>
        <b-col span="10">
          <b-button type="text" @click="printClick4">打印预览</b-button>
          <b-button type="text" @click="printClick5">打印设计</b-button>
        </b-col>
      </b-row>
    </div>
  </b-collapse-wrap>
</template>

<script setup>
import { ref } from 'vue'
import { getLodop } from '@/plugins/lodop/LodopFuncs'
defineProps({
  title: {
    type: String,
    default: '',
  },
})

const htmlText =
  ref(`<table border="1" width="360" height="220" style="border-collapse:collapse;border:solid 1px" bordercolor="#000000">
  <tr>
    <td width="100%" height="240">
      <p align="center">
        <font face="隶书" size="5" style="letter-spacing: 10px">郭德强</font>
        <p align="center"><font face="宋体" size="3">科学家</font></p>
        <p align="left"><font face="宋体" size="3">地址：中国北京社会科学院附近东大街西胡同</font></p>
        <p align="left"><font face="宋体" size="3">电话：010-88811888</font></p>
        <p>
        <br>
      </p>
    </td>
  </tr>
</table>`)

function CreatePrintPage() {
  const LODOP = getLodop()
  LODOP.PRINT_INIT('打印控件功能演示_Lodop功能_名片')
  LODOP.ADD_PRINT_RECT(10, 55, 360, 220, 0, 1)
  LODOP.SET_PRINT_STYLE('FontSize', 11)
  LODOP.ADD_PRINT_TEXT(20, 180, 100, 25, '郭德强')
  LODOP.SET_PRINT_STYLEA(2, 'FontName', '隶书')
  LODOP.SET_PRINT_STYLEA(2, 'FontSize', 15)
  LODOP.ADD_PRINT_TEXT(53, 187, 75, 20, '科学家')
  LODOP.ADD_PRINT_TEXT(100, 131, 272, 20, '地址：中国北京社会科学院附近东大街西胡同')
  LODOP.ADD_PRINT_TEXT(138, 132, 166, 20, '电话：010-88811888')
}

function printClick() {
  const LODOP = getLodop()
  CreatePrintPage()
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 1000, 1200, '') // 演示设置各种样式的打印预览窗口：
  LODOP.PREVIEW() // 打印预览
}

function printClick2() {
  const LODOP = getLodop()
  CreatePrintPage()
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 1000, 1200, '') // 演示设置各种样式的打印预览窗口：
  LODOP.PRINT() // 打印预览
}

function printClick3() {
  const LODOP = getLodop()
  CreatePrintPage()
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 1000, 1200, '') // 演示设置各种样式的打印预览窗口：
  LODOP.PRINTA() // 打印预览
}

function printClick4() {
  const LODOP = getLodop()
  LODOP.PRINT_INIT('')
  LODOP.ADD_PRINT_HTM(10, 55, '100%', '100%', htmlText.value)
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 1000, 1200, '') // 演示设置各种样式的打印预览窗口：
  LODOP.PREVIEW()
}

function printClick5() {
  const LODOP = getLodop()
  LODOP.PRINT_INIT('')
  LODOP.ADD_PRINT_HTM(10, 55, '100%', '100%', htmlText.value)
  LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 1000, 1200, '') // 演示设置各种样式的打印预览窗口：
  LODOP.PRINT_DESIGN()
}
</script>

<style scoped></style>
